#app {
  height: 100%;
  background-color: #F6F8FA;

  .app__container {
    // height: calc(100% - 256px);
    padding-top: 60px;
    height: 100%;
    position: relative;

    .bread-crumb {
      position: absolute;
      width: calc(100% - 340px);
      height: 40px;
      line-height: 40px;
      // background-color: #fff;
      z-index: 10;
      right: 10px;
      top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .view__tab {
        width: 200px;
        text-align: right;
      }
    }

    .leftTree {
      height: calc(100% - 80px);
      width: 300px;
      padding: 5px 5px 0;
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 10;
      background-color: #fff;

      .el-tree-node__content .is-disabled {
        display: none;
      }

      .tree__fold {
        // height: 34px;
        // line-height: 34px;
        border-top: 1px solid #EDEEF0;
        border-bottom: 1px solid #EDEEF0;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        color: #1E90FF;

        // background-color: #fff;
        .arrow-up {
          transform: rotate(90deg);
        }

        .arrow-down {
          transform: rotate(270deg);
        }
      }

      .search-box {
        width: 100%;
        // padding: 10px 0px;
        padding-bottom: 5px;

        .el-input__inner {
          height: 34px;
          line-height: 34px;
        }
      }

      .page-tree {
        // margin: 0 15px;
        height: calc(100% - 75px);
        overflow-y: auto;
        background-color: #fff;

        .el-tree-node {

          &.focus>.el-tree-node__content,
          &:focus>.el-tree-node__content,
          >.el-tree-node__content:hover {
            background-color: #f2f3f8;
          }

          .el-tree-node__content {
            height: 41px;
            line-height: 41px;
            overflow: hidden;
            border-left: 4px solid transparent;

            .title {
              vertical-align: bottom;
              display: inline-block;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              width: 100%;
              padding-right: 24px;
            }

            .el-icon-caret-right {
              &:before {
                content: "\e791";
                font-size: 14px;
              }
            }

            .tree-icon {
              margin-right: 4px;
            }

            img {
              margin-top: -3px;
            }

            .el-tree-node__expand-icon {
              transition: 0.2s;

              &.expanded {
                margin-top: -4px;
                transition: 0.2s;
              }
            }
          }

        }

        .custom-tree-node {
          width: 100%;
          height: 41px;
          line-height: 41px;
          user-select: none;
          padding-right: 24px;
          position: relative;

          .tree__count {
            position: absolute;
            z-index: 20;
            right: 5px;
            top: 0;
            height: 100%;
            line-height: 41px;
            opacity: 0.95;
          }
        }
      }
      &.tree__fold__close {
        height: 42px;
        // .tree__fold{
        //   display: none;
        // }
      }

      &.app__aside__data {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 20;
        height: calc(100% - 15px);
        padding: 20px 10px 0;
      }

      &.app__aside__folded {
        height: 130px;
      }
    }

  }
}